<template>
     <el-breadcrumb :separator-icon="ArrowRight"  v-for="(crumb, index) in crumbs" :key="index" class='breadcrumb_box'>
      <el-breadcrumb-item :to="{ path: '/home/index' }"  @click="tos">后台</el-breadcrumb-item >
            <el-breadcrumb-item ><span >{{ clickedButtonId }}</span></el-breadcrumb-item>
            <el-breadcrumb-item >
               <span>{{ crumb.label }}</span> 
            </el-breadcrumb-item>
      </el-breadcrumb>
  </template>
  <script  setup>
  import {
  ref,
  computed,
  onMounted,
  watch,
} from "vue";
import { useRouter,useRoute } from "vue-router";
  import { ArrowRight } from '@element-plus/icons-vue'
  let crumbs=ref([])
  let clickedButtonId=ref('')
  let route = useRoute();
  let tos=()=>{
      sessionStorage.setItem('title-text', "");
      
    }

  let  updateCrumbs=()=>{
      const routes = route.matched;
      const newCrumbs = routes
        .filter(route => route.meta && route.meta.title)
        .map(route => ({
          to: route.path,
          label: route.meta.title,
          title: route.meta.big_title
        }));
        
        newCrumbs.forEach((crumb) => {
    if (crumbs.value.length < 1) {
        crumbs.value.shift();
        crumbs.value.push(crumb);
        
    } else {
      crumbs.value.shift();
      crumbs.value.push(crumb);
    }
  });
    }
    onMounted(()=>{
      updateCrumbs()
       let title_t = sessionStorage.getItem('title-text')
      
       if(title_t){
        clickedButtonId.value = title_t
       }else{
        clickedButtonId.value = '数据分析'
       }
    })
    watch(route,()=>{
      updateCrumbs(route)
      let title_t = sessionStorage.getItem('title-text')
      clickedButtonId.value = title_t
      
    })
  </script>
 <style lang="less" >
   .breadcrumb_box {
    .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a{
        color: #fff;
    }
   }
</style>
<style lang="less" scoped>
  .breadcrumb_box {
      width: auto;
      display: flex;
      align-items: center;
      padding:0 20px;
      font-size:16px;
      height:80px;
      line-height:50px;
      background:#545c64;
      .el-breadcrumb__inner span{
        color: #fff;
      }
  }
  </style>